<template>
  <div class="tooltip">
    <fx-card title="基础用法">
      <ul class="list">
        <li style="justify-content:center;">
          <fx-button class="mr20" v-tooltip.topLeft="'上左 tooltip'">上左</fx-button>
          <fx-button class="mr20" v-tooltip.top="'上边 tooltip'">上边</fx-button>
          <fx-button class="mr20" v-tooltip.topRight="'上右 tooltip'">上右</fx-button>
        </li>
        <li style="justify-content:space-between;">
          <div class="left">
            <fx-button class="mb20" v-tooltip.leftTop="'左上 tooltip\n左上 tooltip\n左上 tooltip'">左上</fx-button>
            <fx-button class="mb20" v-tooltip.left="'左边 tooltip\n左边 tooltip\n左边 tooltip'">左边</fx-button>
            <fx-button class="mb20" v-tooltip.leftBottom="'左下 tooltip\n左下 tooltip\n左下 tooltip'">左下</fx-button>
          </div>
          <div class="right">
            <fx-button class="mb20" v-tooltip.rightTop="'右上 tooltip\n右上 tooltip\n右上 tooltip'">右上</fx-button>
            <fx-button class="mb20" v-tooltip.right="'右边 tooltip\n右边 tooltip\n右边 tooltip'">右边</fx-button>
            <fx-button class="mb20" v-tooltip.rightBottom="'右下 tooltip\n右下 tooltip\n右下 tooltip'">右下</fx-button>
          </div>
        </li>
        <li style="justify-content:center;">
          <fx-button class="mr20" v-tooltip.bottomLeft="'下左 tooltip'">下左</fx-button>
          <fx-button class="mr20" v-tooltip.bottom="'下边 tooltip'">下边</fx-button>
          <fx-button class="mr20" v-tooltip.bottomRight="'下右 tooltip'">下右</fx-button>
        </li>
      </ul>
      <template #hide>
        <pre v-highlight="base"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="颜色">
      <fx-button class="mr20" v-tooltip="'Default Dark'">Default Dark</fx-button>
      <fx-button class="mr20" v-tooltip="'Dark Plain'" fx-tooltip-plain>Dark Plain</fx-button>
      <fx-button class="mr20" v-tooltip="'Red'" fx-tooltip-color="red">Red</fx-button>
      <fx-button class="mr20" v-tooltip="'Red Plain'" fx-tooltip-color="red" fx-tooltip-plain>Red Plain</fx-button>
      <fx-button class="mr20" v-tooltip="'#f60'" fx-tooltip-color="#f60">#f60</fx-button>
      <fx-button class="mr20" v-tooltip="'#f60 Plain'" fx-tooltip-color="#f60" fx-tooltip-plain>#f60 Plain</fx-button>
      <fx-button class="mr20" v-tooltip="'rgb(255,102,153)'" fx-tooltip-color="rgb(255,102,153)">rgb(255,102,153)
      </fx-button>
      <fx-button class="mr20" v-tooltip="'rgb(255,102,153) Plain'" fx-tooltip-color="rgb(255,102,153)" fx-tooltip-plain>
        rgb(255,102,153) Plain
      </fx-button>
      <template #hide>
        <pre v-highlight="color"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="设置宽度">
      <fx-button class="mr20" v-tooltip="widthText" fx-tooltip-width="300">宽度300px</fx-button>
      <fx-button class="mr20" v-tooltip.topLeft="widthText" fx-tooltip-width="600">宽度600px</fx-button>
      <template #hide>
        <pre v-highlight="width"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="根据文字是否超出范围,文字将显示...,并显示提示语,否则不触发提示">
      <p
        style="width: 150px;height: 30px;line-height: 30px;border: 1px solid #ccc;margin-bottom: 10px;"
        v-tooltip="overflowText" fx-tooltip-text-over>
        {{ overflowText }}</p>
      <p>下方输入减少文字,内容未超出长度时,不会显示提示语</p>
      <fx-input v-model="overflowText"></fx-input>
      <template #hide>
        <pre v-highlight="overflow"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="设置时间缓慢显示提示">
      <fx-button class="mr20" v-tooltip="'延迟500ms显示'" fx-tooltip-time="500">500ms</fx-button>
      <fx-button class="mr20" v-tooltip="'延迟1000ms显示'" fx-tooltip-time="1000">1000ms</fx-button>
      <fx-button class="mr20" v-tooltip="'延迟1500ms显示'" fx-tooltip-time="1500">1500ms</fx-button>
      <template #hide>
        <pre v-highlight="time"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="API 指令">
      <fx-table :data="tooltipDirective">
        <fx-table-item prop="name" label="属性"></fx-table-item>
        <fx-table-item prop="directions" label="说明"></fx-table-item>
        <fx-table-item prop="type" label="类型"></fx-table-item>
        <fx-table-item prop="value" label="可选值"></fx-table-item>
        <fx-table-item prop="default" label="默认"></fx-table-item>
      </fx-table>
    </fx-card>
  </div>
</template>

<script setup lang="ts">
import { defaultContent } from '@/assets/menuList'
import { ref } from 'vue'

const tooltipDirective = [
  {
    name: 'v-tooltip',
    directions: '提示值',
    type: 'String',
    value: '修饰符 topLeft | top | topRight | rightTop | right | rightBottom | bottomLeft | bottom | bottomRight | leftTop | left | leftBottom',
    default: 'top'
  },
  { name: 'fx-tooltip-color', directions: '提示框背景色', type: 'String' },
  { name: 'fx-tooltip-plain', directions: '提示框镂空样式', type: 'Boolean', default: false },
  { name: 'fx-tooltip-width', directions: '提示框最大宽度', type: 'String' },
  { name: 'fx-tooltip-text-over', directions: '当该文字超出宽度时，显示提示', type: 'Boolean', default: false },
  { name: 'fx-tooltip-time', directions: '延迟显示提示', type: 'String' }
]

const widthText = defaultContent
const overflowText = ref<string>('根据文字是否超长,显示提示语')
const base = `<ul class="list">
  <li style="justify-content:center;">
    <fx-button class="mr20" v-tooltip.topLeft="'上左 tooltip'">上左</fx-button>
    <fx-button class="mr20" v-tooltip.top="'上边 tooltip'">上边</fx-button>
    <fx-button class="mr20" v-tooltip.topRight="'上右 tooltip'">上右</fx-button>
  </li>
  <li style="justify-content:space-between;">
    <div class="left">
      <fx-button class="mb20" v-tooltip.leftTop="'左上 tooltip\\n左上 tooltip\\n左上 tooltip'">左上</fx-button>
      <fx-button class="mb20" v-tooltip.left="'左边 tooltip\\n左边 tooltip\\n左边 tooltip'">左边</fx-button>
      <fx-button class="mb20" v-tooltip.leftBottom="'左下 tooltip\\n左下 tooltip\\n左下 tooltip'">左下</fx-button>
    </div>
    <div class="right">
      <fx-button class="mb20" v-tooltip.rightTop="'右上 tooltip\\n右上 tooltip\\n右上 tooltip'">右上</fx-button>
      <fx-button class="mb20" v-tooltip.right="'右边 tooltip\\n右边 tooltip\\n右边 tooltip'">右边</fx-button>
      <fx-button class="mb20" v-tooltip.rightBottom="'右下 tooltip\\n右下 tooltip\\n右下 tooltip'">右下</fx-button>
    </div>
  </li>
  <li style="justify-content:center;">
    <fx-button class="mr20" v-tooltip.bottomLeft="'下左 tooltip'">下左</fx-button>
    <fx-button class="mr20" v-tooltip.bottom="'下边 tooltip'">下边</fx-button>
    <fx-button class="mr20" v-tooltip.bottomRight="'下右 tooltip'">下右</fx-button>
  </li>
</ul>`
const color = `<fx-button class="mr20" v-tooltip="'Default Dark'">Default Dark</fx-button>
<fx-button class="mr20" v-tooltip="'Dark Plain'" fx-tooltip-plain>Dark Plain</fx-button>
<fx-button class="mr20" v-tooltip="'Red'" fx-tooltip-color="red">Red</fx-button>
<fx-button class="mr20" v-tooltip="'Red Plain'" fx-tooltip-color="red" fx-tooltip-plain>Red Plain</fx-button>
<fx-button class="mr20" v-tooltip="'#f60'" fx-tooltip-color="#f60">#f60</fx-button>
<fx-button class="mr20" v-tooltip="'#f60 Plain'" fx-tooltip-color="#f60" fx-tooltip-plain>#f60 Plain</fx-button>
<fx-button class="mr20" v-tooltip="'rgb(255,102,153)'" fx-tooltip-color="rgb(255,102,153)">rgb(255,102,153)</fx-button>
<fx-button class="mr20" v-tooltip="'rgb(255,102,153) Plain'" fx-tooltip-color="rgb(255,102,153)" fx-tooltip-plain>rgb(255,102,153) Plain</fx-button>`
const width = `<fx-button class="mr20" v-tooltip="widthText" fx-tooltip-width="300">宽度300px</fx-button>
<fx-button class="mr20" v-tooltip.topLeft="widthText" fx-tooltip-width="600">宽度600px</fx-button>`
const overflow = `<p style="width: 150px;height: 30px;line-height: 30px;border: 1px solid #ccc;margin-bottom: 10px;"v-tooltip="overflowText"fx-tooltip-text-over>
  {{ overflowText }}</p>
<p>下方输入减少文字,内容未超出长度时,不会显示提示语</p>
<fx-input v-model="overflowText"></fx-input>`
const time = `<fx-button class="mr20" v-tooltip="'延迟500ms显示'" fx-tooltip-time="500">500ms</fx-button>
<fx-button class="mr20" v-tooltip="'延迟1000ms显示'" fx-tooltip-time="1000">1000ms</fx-button>
<fx-button class="mr20" v-tooltip="'延迟1500ms显示'" fx-tooltip-time="1500">1500ms</fx-button>`
</script>

<style scoped lang="scss">
.tooltip {
  .list {
    width: 400px;
    margin: 0 auto;

    > li {
      display: flex;

      > .left, > .right {
        display: flex;
        flex-direction: column;
      }
    }
  }
}
</style>
